<template>
  <div>
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>
          <i class="el-icon-lx-cascades"></i> 实验室管理->实验室详情
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="container">
<!--      <div class="handle-box">
        &lt;!&ndash; <el-cascader :options='options' filterable v-model='op.options' class='handle-input mr10'></el-cascader> &ndash;&gt;
        <el-input
          style="width: 250px"
          v-model="laboratoryVo.name"
          placeholder="输入实验室名字"
          class="handle-input mr10"
          clearable
        >
        </el-input>
        <el-select
          v-model="laboratoryVo.state"
          placeholder="状态"
          clearable
          size="small"
          style="width: 240px"
        >
          <el-option
            v-for="dict in options1.state"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
        <el-button
          type="primary"
          icon="el-icon-search"
          style="margin-left: 8px"
          size="mini"
          @click="search"
          >搜索</el-button
        >
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
          >重置</el-button
        >
        <el-button
          type="primary"
          icon="el-icon-plus"
          class="handle-del mr10"
          @click="handingAdd"
          >新增</el-button
        >
      </div>-->
      <el-table
        v-loading="loading"
        :data="process.generalWorld"
        border
        class="table"
        ref="multipleTable"
        header-cell-class-name="table-header"
      >
        <el-table-column label="序号" type="index" align="center" width="50">
        </el-table-column>
        <el-table-column prop="name" label="实验室名称" align="center"></el-table-column>
        <el-table-column prop="address" label="地址" align="center"></el-table-column>
        <el-table-column prop="remake" label="备注" align="center"></el-table-column>
<!--        <el-table-column prop="status" label="状态" align="center">-->
<!--          <template slot-scope="scope">-->
<!--            <span>{{ formatStatus(scope.row.state) }}</span>-->
<!--          </template>-->
<!--        </el-table-column>-->
        <el-table-column label="操作" align="center" width="260">
          <template slot-scope="scope">
<!--            <el-button-->
<!--              type="text"-->
<!--              icon="el-icon-edit"-->
<!--              @click="handleEdit(scope.row)"-->
<!--              >编辑</el-button-->
<!--            >-->
<!--            <el-button-->
<!--              type="text"-->
<!--              icon="el-icon-delete"-->
<!--              @click="handleDelete(scope.row, scope.$index)"-->
<!--              >删除-->
<!--            </el-button>-->
            <el-button type="text" icon="el-icon-bell" @click="remoteDoorOpening()">开门</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div style="text-align: center">
        <el-pagination
          background
          layout="total,sizes,prev, pager, next,jumper"
          :current-page="pageInfo.currentPage"
          :page-size="pageInfo.pageSize"
          :total="pageInfo.pageTotal"
          :page-sizes="[5, 10, 20, 50]"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        >
        </el-pagination>
      </div>
    </div>

    <!--添加页面-->
<!--    <el-dialog-->
<!--      :title="this.title"-->
<!--      :visible.sync="addVisible"-->
<!--      width="500px"-->
<!--      append-to-body-->
<!--    >-->
<!--      <div style="height: 300px; font-size: 12px" class="laboratory">-->
<!--        <el-form-->
<!--          ref="laboratory"-->
<!--          :model="laboratory"-->
<!--          label-width="80px"-->
<!--          class="test"-->
<!--        >-->
<!--          <el-form-item label="实验室名称" prop="name">-->
<!--            <el-input-->
<!--              v-model="laboratory.name"-->
<!--              placeholder="请输入实验室名称"-->
<!--              style="width: 90%"-->
<!--            ></el-input>-->
<!--          </el-form-item>-->
<!--          <el-form-item label="地址" prop="address">-->
<!--            <el-input-->
<!--              v-model="laboratory.address"-->
<!--              placeholder="请输入地址"-->
<!--              style="width: 90%"-->
<!--            ></el-input>-->
<!--          </el-form-item>-->
<!--          <el-form-item label="状态" prop="state">-->
<!--            <el-select-->
<!--              v-model="laboratory.state"-->
<!--              placeholder="请选择状态"-->
<!--              style="width: 90%"-->
<!--            >-->
<!--              <el-option-->
<!--                v-for="(dict, index) in options1.state"-->
<!--                :key="index"-->
<!--                :label="dict.label"-->
<!--                :value="dict.value"-->
<!--              />-->
<!--            </el-select>-->
<!--          </el-form-item>-->
<!--          <el-form-item label="备注" prop="description">-->
<!--            <el-input-->
<!--              type="textarea"-->
<!--              v-model="laboratory.remake"-->
<!--              style="width: 90%"-->
<!--            ></el-input>-->
<!--          </el-form-item>-->
<!--        </el-form>-->
<!--      </div>-->
<!--      <div style="text-align: right; margin-top: 20px">-->
<!--        <el-button type="primary" @click="passAdd">确定</el-button>-->
<!--        <el-button @click="remove">取消</el-button>-->
<!--      </div>-->
<!--    </el-dialog>-->
  </div>
</template>

<script>
import { fetchData } from "../../api/index";
import { parseTime } from "../../utils/common";
import variable from "../../utils/request";

export default {
  name: "laboratory",

  data() {
    return {
      value1: true,
      value2: true,
      options: [],
      options1: {
        state: [
          {
            label: "可用",
            value: "0",
          },
          {
            label: "维护",
            value: "1",
          },
        ],
      },
      query: {
        cgText: "",
        taskStatus: undefined,
      },
      process: {
        generalWorld: [],
      },
      look: {
        cgId: "",
        cgText: "",
      },
      laboratory: {},
      laboratorys: {},
      title: "添加实验室",
      clickType: "",
      value: "",
      rules: {
        name: [
          { required: true, message: "请输入实验室名称", trigger: "blur" },
        ],
        address: [{ required: true, message: "请输入地址", trigger: "blur" }],
        state: [{ required: true, message: "请选择状态", trigger: "blur" }],
      },
      pageInfo: {
        currentPage: 1,
        pageSize: 10,
        pageTotal: 80,
      },
      laboratoryVo: {
        name: undefined,
        state: undefined,
      },
      processId: "",
      tableData: [],
      handingData: [],
      multipleSelection: [],
      delList: [],
      editVisible: false,
      TransferVisible: false,
      lookVisible: false,
      addVisible: false,

      pageTotal: 0,
      idx: -1,
      id: -1,
      password2: "",
      dis: true,
      collectInfo: {},
      transferLsit: [],
      mark: "2",
      loading: true,
    };
  },
  created() {
    this.processGeneralData();
  },
  methods: {
    //实验室列表
    processGeneralData() {
      this.loading = true;
      let data = {
        name: this.laboratoryVo.name,
        state: this.laboratoryVo.state,
        pageSize: this.pageInfo.pageSize,
        pageNum: this.pageInfo.currentPage,
      };
      console.log(data);
      variable.getaxiosPost(`/laboratory/findAll`, data).then((res) => {
        this.pageInfo.pageTotal = res.data.total;
        this.process.generalWorld = res.data.list;
        console.log(res.data.list);
        this.loading = false;
      });
    },
    // 表单重置
    resetQuery() {
      this.laboratoryVo = {};
      this.processGeneralData();
    },
    //搜索
    search() {
      this.processGeneralData();
    },
    // //获取部门
    // dept() {
    //   let data = {
    //     dept_id: "",
    //   };
    //   variable.getaxiosPost("/system/dept/list", data).then((res) => {
    //     console.log(res.data);
    //     this.options = res.data;
    //     console.log(this.options);
    //   });
    // },
    // 状态过滤
    formatStatus(val) {
      return val == 0 ? "可用" : val == 1 ? "维护" : "";
    },
    //时间转换

    formatData(row, column, cellValue, index) {
      var s = new Date(cellValue);
      var time = variable.dateFormat(s);
      return time;
    },

    //取消弹框
    remove() {
      console.log(this.laboratory);
      this.laboratory = this.laboratorys;
      this.laboratorys = {};
      this.addVisible = false;
    },
    //搜索
    // search(){
    //     this.pageInfo.currentPage = 1
    //     this.processGeneralData()
    // },

    //流转记录

    // 修改操作
    handleEdit(row) {
      this.addVisible = true;
      console.log(row);
      this.title = "实验室详情";
      this.clickType = "update";
      this.laboratory = JSON.parse(JSON.stringify(row));
      this.laboratory.state = row.status.toString();
      console.log(this.laboratory);
      this.laboratory.id = parseInt(row.id);
    },
    // 添加操作
    handingAdd() {
      this.addVisible = true;
      this.title = "添加实验室";
      this.clickType = "add";
      console.log(this.laboratory);
      this.laboratory = this.laboratorys;
    },
    //添加
    addlaboratory() {
      this.$refs.laboratory.validate((valid, value, callback) => {
        if (valid) {
          // valid是一个布尔值通过为true错误为false
          // 验证通过
          let data = {
            // reportTime: parseTime(
            //   this.laboratory.reportTime,
            //   "{y}-{m}-{d} {h}:{i}:{s}"
            // ),
            //reportTime: this.laboratory.reportTime,
            name: this.laboratory.name,
            address: this.laboratory.address,
            state: this.laboratory.state,
            remake: this.laboratory.remake,
          };
          console.log(data);
          variable.getaxiosPost("/laboratory/add", data).then((res) => {
            if (res.code == "0") {
              this.$message.success("添加成功", {
                duration: 2000,
              });
              this.processGeneralData();
              this.laboratorys = {};
            } else {
              this.$message.error(res.data.message, {
                duration: 2000,
              });
              this.laboratorys = {};
            }
          });
        } else {
          // 验证不通过
          callback(new Error(value + "格式不正确"));
          return false;
        }
      });
    },
    //修改
    updatelaboratory() {
      let data = {
        // reportTime: parseTime(
        //   this.laboratory.reportTime,
        //   "{y}-{m}-{d} {h}:{i}:{s}"
        // ),
        //reportTime: this.laboratory.reportTime,
        id: this.laboratory.id,
        name: this.laboratory.name,
        address: this.laboratory.address,
        state: this.laboratory.state,
        remake: this.laboratory.remake,
      };
      console.log(data);
      variable.getaxiosPost("/laboratory/update", data).then((res) => {
        if (res.code == "0") {
          this.$message.success("修改成功", {
            duration: 2000,
          });
          this.processGeneralData();
        } else {
          this.$message.error(res.data.message, {
            duration: 2000,
          });
        }
      });
    },

    //提交

    passAdd() {
      console.log(this.clickType);
      if (this.clickType == "add") {
        //添加
        this.addlaboratory();
        this.addVisible = false;
      } else if (this.clickType == "update") {
        //修改
        this.updatelaboratory();
        this.addVisible = false;
        //深拷贝
        this.processGeneralData();
      }
    },
    //删除
    handleDelete(row, index) {
      console.log(row.id);
      let json = {
        id: row.id,
      };
      console.log(json);
      // console.log(index)
      this.$confirm("是否确定要删出此纪录", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          variable.getaxiosPost(`/laboratory/delete`, json).then((res) => {
            console.log(res);
            if (res.code == "0") {
              this.$message.success("删除成功", {

                duration: 2000,
              });
              // let pageSized = Math.ceil(this.process.generalWorld.length / this.pageInfo.pageSize);
              //               if (pageSized < this.pageInfo.currentPage) {
              //                   this.$nextTick(() => {
              //                       this.pageInfo.currentPage--;
              //                       // this.processGeneralData();
              //                   });
              //               }
               this.processGeneralData();
              if(this.process.generalWorld.length<1){
                this.pageInfo.currentPage--;
                this.processGeneralData();
              }
            } else {
              this.$message.error(res.data.message, {
                duration: 2000,
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },

    //确定修改
    passUpdate(cgId, cgText) {
      let json = {
        cgId: cgId,
        cgText: cgText,
      };
      console.log(json);
      variable
        .getaxiosPsot("/collect/updatecolectGenearlWord", json)
        .then((res) => {
          console.log(res);
          this.editVisible = false;
          this.processGeneralData();
        });
    },

    // 保存编辑
    saveEdit() {
      this.editVisible = false;
      this.$message.success(`修改第 ${this.idx + 1} 行成功`);
      this.$set(this.tableData, this.idx, this.form);
    },
    /**
     * 分页大小切换
     */
    handleSizeChange(val) {
      this.pageInfo.pageSize = val;
      this.processGeneralData();
    },
    /**
     * 分页切换
     */
    handleCurrentChange(val) {
      console.log(val);
      this.pageInfo.currentPage = val;
      this.processGeneralData();
    },
    //新增
    add() {
      this.editVisible = true;
    },
    // handlePosition(row) {
    //   console.log(row);
    //   this.$router.push({ path: "/aimap", query: { ...row } });
    // },
    remoteDoorOpening(){
      console.log(this.id);
      let json = {
        id: this.id
      };
      console.log(json);
      this.$confirm('确定要打开此门吗', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
          .then(() => {
            variable.getaxiosPost('/laboratory/rdOpening', json).then((flag) => {
              console.log(flag);
              if (flag) {
                this.$message.success('远程开门成功', {
                  duration: 2000
                });
              } else {
                this.$message.error('远程开门失败', {
                  duration: 2000
                });
              }
            });
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消远程开门'
            });
          });
    }
  },
};
</script>

<style scoped>
.handle-box {
  margin-bottom: 20px;
}

.handle-select {
  width: 120px;
}

.handle-input {
  width: 300px;
  display: inline-block;
}

.table {
  width: 100%;
  font-size: 14px;
}

.red {
  color: #ff0000;
}

.mr10 {
  margin-right: 10px;
}

.table-td-thumb {
  display: block;
  margin: auto;
  width: 40px;
  height: 40px;
}
::v-deep .laboratory .el-form .el-form-item .el-form-item__label {
  width: 100px !important;
}
</style>
